<template>
  <div>
    <el-table :data="list" style="width: 100%" max-height="500">
      <el-table-column
        fixed
        prop="comments.commentId"
        label="评论ID"
        width="150"
      >
      </el-table-column>
      <el-table-column prop="users.userName" label="所属用户" width="120">
      </el-table-column>
      <el-table-column
        prop="comments.relatedEntityType"
        label="评论类型"
        width="120"
        :formatter="formatType"
      >
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="评论对象"
        width="120"
        show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="comments.comment"
        label="评论内容"
        width="120"
        show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="comments.commentTime"
        label="评论时间"
        width="160"
        show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="comments.commentRating" label="评分" width="150">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageDto.page"
        :page-sizes="[5, 10, 20, 30, 50]"
        :page-size="pageDto.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "commenttable",
  data() {
    return {
      pageDto: { page: 1, size: 10, users: {}, hotels: {}, landmarks: {} },
      list: [],
      displayList: [],
      totalSize: 0,
    };
  },
  methods: {
    // element ui
    // 分页
    handleSizeChange(val) {
      this.pageDto.size = val;
      this.queryByPage();
    },
    handleCurrentChange(val) {
      this.pageDto.page = val;
      this.queryByPage();
    },
    // 评论类型
    formatType(data) {
      // console.log(data.orderStatus);
      switch (data.comments.relatedEntityType) {
        case 1:
          return "景区";
          break;
        case 2:
          return "酒店";
          break;
        case 3:
          return "套餐";
          break;
        default:
          return "未知评论类型";
          break;
      }
    },

    // 删除
    handleDelete(row) {
      this.$api.commentsApi
        .delete({ commentId: row.comments.commentId})
        .then((res) => {
          if (res.data.code == 1) {
            this.$notify({
              title: "成功",
              message: "数据删除成功！",
              type: "success",
            });
            this.queryByPage();
          } else {
            this.$notify.error({
              title: "错误",
              message: "数据删除失败！",
            });
          }
        });
    },

    // 请求参数
    queryByPage() {
      this.$api.commentsApi.queryCommentsByPage(this.pageDto).then((res) => {
        this.list = res.data.data.list;
        this.totalSize = res.data.data.total;
      });
    },
  },
  mounted() {
    this.queryByPage();
  },
};
</script>
